<script setup lang="ts">
import type { Ref } from 'vue'
import { ref } from 'vue'
import { YiTable } from '@uublue/yimi-element-plus'
import moment from 'moment'
const loginTimePeriod: Ref<[string, string] | undefined> = ref()
</script>

<!-- 定义api -->
<script lang="ts">
import logApis from '@/apis/system/log'

const { queryLoginLogs } = logApis
export default {
  name: 'LoginLog',
  apis: {
    queryLoginLogs
  },
}
</script>

<template>
  <div class="app-container">
    <yi-table
      ref="syslogTable"
      :api="
        () => {
          return loginTimePeriod
            ? {
                ...queryLoginLogs,
                params: {
                  createTimeStart: loginTimePeriod[0],
                  createTimeEnd: loginTimePeriod[1]
                }
              }
            : queryLoginLogs
        }
      "
      :columns="[
        {
          label: '用户名称',
          prop: 'username'
        },
        {
          label: '登录地址',
          prop: 'remoteAddr'
        },
        {
          label: '登录结果',
          prop: 'exception',
          slot: 'exception'
        },
        {
          label: '浏览器',
          prop: 'browser'
        },
        {
          label: '操作系统',
          prop: 'os'
        },
        {
          label: '登录时间',
          prop: 'createTime',
          width: 550,
          formatter: (row, column, cellValue) => {
            return moment(cellValue).format('lll')
          }
        }
      ]"
    >
      <template #conditions="{ model, refresh }">
        <el-form :model="model" inline size="small">
          <el-form-item label="用户名称">
            <el-input v-model="model.username" placeholder="请输入用户名称"></el-input>
          </el-form-item>
          <el-form-item label="登录地址">
            <el-input v-model="model.remoteAddr" placeholder="请输入登录地址"></el-input>
          </el-form-item>
          <el-form-item label="登录时间">
            <el-date-picker
              v-model="loginTimePeriod"
              style="width: 240px"
              format="YYYY-MM-DDTHH:mm:ss"
              value-format="YYYY-MM-DDTHH:mm:ss.SSSZ[Z]"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="refresh()">查询</el-button>
          </el-form-item>
        </el-form>
      </template>

      <template #exception="{ row }">
        <el-tag v-if="row.exception" type="danger">失败</el-tag>
        <el-tag v-else type="success">成功</el-tag>
      </template>
    </yi-table>
  </div>
</template>

<style lang="scss" scoped></style>
